<template>
  <div class="">
   <!-- 折线图渲染 -->
   <div id="charts" class="chart" ref="ref_charts"></div>
  </div>
</template>

<script lang="ts">
import * as echarts from 'echarts'

//timestamp为时间戳
function formatTime(timestamp) {
  let date = new Date(timestamp);
  let Year = date.getFullYear();
  let Moth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
  let Day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  let Hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
  let Minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  let Sechond = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  //let result = Hour + ':' + Minute + ':' + Sechond + ' ' +  Moth + '/' + Day
  let result = Hour + ':' + Minute + ':' + Sechond;
  return result;
}

export default {
    name: '光栅折线图',
    data(){
        return {
            ws: null,
            url:"ws://127.0.0.1:8086/wss/echarts",
            lineChart:null,
            titleData:null
        }
    },
    computed: {},
    components: {},
    mounted(){
        //挂载的时候进行初始化
        this.init();
    },
    methods:{
        init(){
            this.ws = new WebSocket(this.url);
            this.ws.onopen = this.websocketOnOpen;
            this.ws.onerror = this.websocketOnError;
            this.ws.onmessage = this.websocketOnMessage;
            this.ws.onclose = this.websocketClose;
        },

        websocketOnOpen(){
            console.log("WebSocket连接成功");
        },
        websocketOnError: function (e) {
            console.log("WebSocket连接发生错误",e);
        },
        websocketClose: function (e) {
            console.log("WebSocket连接关闭",e);
        },
        websocketOnMessage(m){
            //console.log(m)
            if(m.data !== "连接成功"){
                let res = JSON.parse(m.data);
                console.log("res.code: " + res.code)
                if(res.code == 2){
                  this.titleData = "波长模式";
                }else if(res.code == 3){
                  this.titleData = "调试模式";
                }
                this.initLineChart(res.line);
            }
        },

        //更新数据
        initLineChart(lineData) {
            if(lineData == null){
                return;
            }
            //console.log("lineData: " + lineData)
            if(!this.lineChart){
                //this.lineChart = echarts.init(this.$refs.ref_charts)
                this.lineChart = echarts.init(document.getElementById('charts'), 'macarons');
            }
            let chart = this.lineChart;
            // let arr = [];
            //     lineData.forEach(item => {
            //     arr.push([dayjs(item.time).format('YYYY-MM-DD'), item.value]);
            // });
            //console.log("lineData.length: " + lineData.length);
            let dateData = [];
            let channels = [];
            let seriesData1 = [];
            let seriesData2 = [];
            let seriesData3 = [];
            let seriesData4 = [];
            for (var i = 0; i < lineData.length; i++) {
                //console.log("time: " + lineData[i].time);
                dateData.push(lineData[i].time);//获取时间
                //console.log("value: " + lineData[i].value);
                channels = lineData[i].channels;
                let channelData1 = [];
                let channelData2 = [];
                let channelData3 = [];
                let channelData4 = [];
                var light = 2997924608;
                //let value1: number;
                //let value2: number;
                //let value3: number;
                //let value4: number;
                for(var j = 0; j < channels.length; j++){
                  if(j==0){
                    channelData1 = channels[j];
                    var value1 = (light/channelData1.nodes[0].value).toFixed(4);
                    seriesData1.push([lineData[i].time, value1]);
                  }else if(j==1){
                    channelData2 = channels[j];
                    var value2 = (light/channelData2.nodes[0].value).toFixed(4);
                    seriesData2.push([lineData[i].time, value2]);
                  }else if(j==2){
                    channelData3 = channels[j];
                    var value3 = (light/channelData3.nodes[0].value).toFixed(4);
                    seriesData3.push([lineData[i].time, value3]);
                  }else if(j==3){
                    channelData4 = channels[j];
                    var value4 = (light/channelData4.nodes[0].value).toFixed(4);
                    seriesData4.push([lineData[i].time, value4]);
                  }
                }
            }
            //console.log("dateData: " + dateData);
            //console.log("seriesData1: " + seriesData1);
            //console.log("seriesData2: " + seriesData2);
            //console.log("seriesData3: " + seriesData3);
            //console.log("seriesData4: " + seriesData4);
            let option = {
                animation: true,
                title: {
                    show: true,
                    //标题
                    text: this.titleData,
                    top: 2,
                    left: 2,
                    textStyle: {
                    },
                    //二级标题
                    //subtext: '  - 折线图',
                    //subtextStyle: {
                    //    lineHeghit: 6
                    //},
                },
                toolbox: {
                  // 是否显示工具
                    show: true,
                    itemSize: 14,
                    //间隔大小
                    itemGap: 8,
                    // right: 25,
                    feature: {
                      //保存为图片
                        saveAsImage: {
                            type: "jpg",
                            backgroundColor: "#00274b"
                        },
                        // 数据视图
                        dataView: {
                            show: true,
                            // 是否可以读写
                            readOnly: true,
                            backgroundColor: "#00274b"
                        },
                        restore: {
                        // 还原
                        },
                    }
                },
                tooltip: {
                    //图标划过显示
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                      //十字提示指示线
                        type: 'cross',
                        // type: 'line',
                        lineStyle: {
                          //线的类型 虚线
                           type: 'dashed',
                           // 划过吸附指示线
                           // snap: true,
                        }
                    },
                    //悬浮窗的内容
                    // a: 系列名,b: (x轴)类目值, c: 数据值
                    // formatter: `{b}<br>{a}: {c} PM `,
                    //悬浮窗的背景色
                    // background: "red",
                    //边框色
                    // borderColor: '',
                    //边框宽
                    borderWidth: 3,
                    //内边距
                    // padding: '',
                    //悬浮窗是否一直显示
                    alwaysShowContent: false,
                    //划入时悬浮多少秒
                    hideDelay: 1,
                    //划入正常显示
                    enterable: true,
                    //悬浮框的样式
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    }
                },
                grid: {
                    top: '10%',
                    right: '10%',
                    left: '10%',
                    bottom: '10%',
                },
                legend: {
                    selectedMode: true,
                    data: ['通道1','通道2','通道3','通道4'],
                    top: 10,
                },
                dataZoom: {
                    type: 'inside'
                },
                xAxis: {
                  type: 'time',
                  name: "时间",
                  nameLocation: "end",
                  // 紧挨边缘
                  boundaryGap: false,
                  // 设置下这里将x分为7段 8个刻度值
                  splitNumber: 15,
                  splitLine: {
                    //false 隐藏x轴那条线
                    show: true
                  },
                  // 自定义刻度
                  axisTick: {
                    // 控制刻度是否显示
                    //false 隐藏x轴的刻度
                    show: true
                  },
                  // 自定义刻度线
                  axisLine: {
                    //false 隐藏x轴的刻度
                    show: true
                  },
                  // 自定义刻度标签
                  axisLabel: {
                    // 控制标签是否显示
                    show: true,
                    fontSize: 14,
                    //formatter: '{value}',
                    formatter: function (time) {
                      //console.log("time: " + time)
                      var date = new Date(time);
                      var hour = date.getHours();
                      var minute = date.getMinutes();
                      var second = date.getSeconds();
                      var m_seconds = date.getMilliseconds();
                      //console.log("second: " + second)
                      return hour + ':' + minute + ':' + second + ':' + m_seconds;
                    },
                    // 刻度偏移
                    rotate: -20,
                    // offset: 20,
                    // 展示x轴的最后一个，一般我看是不展示的
                    showMaxLabel: false,
                  },
                  data: dateData,
                },
                yAxis: {
                  name: "单位",
                  type: 'value',
                  nameLocation: 'end',
                  // 设置最小值
                  //min: 1540.00000,
                  // 设置最大值
                  //max: 1570.00000,
                  // 取最小值为最小刻度
                  min:'dataMin',
                  // 取最大值为最大刻度
                  max: 'dataMax',
                  // 取最小值向下取整为最小刻度
                  //min: function(value) {
                  //    return Math.floor(value.min)
                  //},
                  // 取最大值向上取整为最大刻度
                  //max: function(value) {
                  //    return  Math.ceil(value.max)
                  //},
                  //是否是脱离 0 值比例
                  scale: true,
                  // 设置间距
                  //interval: 1,
                  // 设置刻度间隔
                  minInterval: 0.0001,
                  splitLine: {
                    //false 隐藏y轴那条线
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                  },
                  // 自定义刻度
                  axisTick: {
                    // 控制刻度是否显示
                    //false 隐藏y轴的刻度
                    show: true
                  },
                  // 自定义刻度线
                  axisLine: {
                    //false 隐藏y轴的刻度
                    show: true,
                    lineStyle: {
                        color: '#000000'
                    }
                  },
                  // 自定义刻度标签
                  axisLabel: {
                    // 控制标签是否显示
                    show: true,
                    interval: 1,
                    // 格式化标签
                    fontSize: 14,
                    // y轴的显示数据单位
                    formatter: '{value}',
                    // 刻度偏移
                    rotate: 20,
                    // 不显示最小刻度线值
                    showMinLabel: false,
                    // 不显示最大刻度线值
                    showMaxLabel: false,
                  },
                  splitArea: {
                      show: false
                  }
                },
                series: [
                  {
                    name: '通道1',
                    type: 'line',
                    showSymbol: false,
                    // 折线图的线条是否平滑
                    smooth: false,
                    // 背景填充
                    areaStyle: {
                      color: '#ffffff',
                      fontSize: 14,
                    },
                    // 多组数据堆叠
                    // stack: "all",
                    label: {
                        // 数据标签显示
                        show: true,
                        // 数据显示位置
                        position: 'top',
                        // 距离
                        distance: 8,
                        // 文字偏移
                        offset: [-2, -2],
                        // 标签内容
                        formatter: "{c}",
                    },
                    data: seriesData1,
                },
                {
                    name: '通道2',
                    type: 'line',
                    showSymbol: false,
                    // 折线图的线条是否平滑
                    smooth: false,
                    // 背景填充
                    areaStyle: {
                      color: '#ffffff',
                      fontSize: 14,
                    },
                    // 多组数据堆叠
                    // stack: "all",
                    label: {
                        // 数据标签显示
                        show: true,
                        // 数据显示位置
                        position: 'top',
                        // 距离
                        distance: 8,
                        // 文字偏移
                        offset: [-2, -2],
                        // 标签内容
                        formatter: "{c}",
                    },
                    data: seriesData2,
                },
                {
                    name: '通道3',
                    type: 'line',
                    showSymbol: false,
                    // 折线图的线条是否平滑
                    smooth: false,
                    // 背景填充
                    areaStyle: {
                      color: '#ffffff',
                      fontSize: 14,
                    },
                    // 多组数据堆叠
                    // stack: "all",
                    label: {
                        // 数据标签显示
                        show: true,
                        // 数据显示位置
                        position: 'top',
                        // 距离
                        distance: 8,
                        // 文字偏移
                        offset: [-2, -2],
                        // 标签内容
                        formatter: "{c}",
                    },
                    data: seriesData3,
                },
                {
                    name: '通道4',
                    type: 'line',
                    showSymbol: false,
                    // 折线图的线条是否平滑
                    smooth: false,
                    // 背景填充
                    areaStyle: {
                      color: '#ffffff',
                      fontSize: 14,
                    },
                    // 多组数据堆叠
                    // stack: "all",
                    label: {
                        // 数据标签显示
                        show: true,
                        // 数据显示位置
                        position: 'top',
                        // 距离
                        distance: 8,
                        // 文字偏移
                        offset: [-2, -2],
                        // 标签内容
                        formatter: "{c}",
                    },
                    data: seriesData4,
                }
                ]
            }
            //进行渲染图表
            chart.setOption(option);
        }
    }
};
</script>

<style scoped lang="less">
  #charts{
    width: 1600px;
    height: 800px;
    border: 2px solid red;
    margin-left: 20px;
    //background-color: black;
  }
</style>
